<template>
	<view>
		<view :style="{'height':allHeight}"></view>
		<view class="customNav" :style="{'padding-top':paddingTop,'height':height,'opacity':opacity,'background-color':bgcolorString}">
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'customNav',
		props: {
			opacity: {
				type: Number,
				default: 1
			},
			bgcolorString: {
				type: String,
				default: '#ffffff'
			}
		},
		data() {
			return {
				paddingTop: '20px',
				height: '32px',
				allHeight:'52px'
			};
		},
		mounted() {
			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					// 获取状态栏高度
					const statusBarHeight = res.statusBarHeight;
					// 计算导航栏高度，这里假设导航栏内容高度为 44px
					const navBarHeight = 44;
					this.paddingTop = `${statusBarHeight}px`
					this.height = `${navBarHeight}px`
					this.allHeight = `${statusBarHeight + navBarHeight}px`
				}
			});
		}
	};
</script>
<style lang="scss">
	.customNav {
		width: 100vw;
		font-weight: bold;
		font-size: 32rpx;
		padding-left: 28rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background: #ffffff;
	}
</style>